<template>
	<view class="page">
		<!-- 头部导航 -->
		<!-- <view class="header-bag">
			<image src="/static/icons/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="header-center">
				<text>填写信息</text>
			</view>
		</view> -->

		<!-- 表单内容 -->
		<view class="wrapper">
			<view class="info-box">
				<!-- 姓名 -->
				<view class="layout-item">
					<image class="icon" :src="`${safeBaseUrl}img/icon-xm@3x.png`" />
					<view class="label">姓名</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.realname" 
							type="text" 
							readonly 
							placeholder="请先完成实名认证"
						/>
					</view>
				</view>

				<!-- 证件号 -->
				<view class="layout-item">
					<image class="icon" :src="`${safeBaseUrl}img/icon-zjlx@3x.png`" />
					<view class="label">证件号</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.idcardNum" 
							type="text" 
							readonly 
							placeholder="请先完成实名认证"
						/>
					</view>
				</view>

				<!-- 银行卡号 -->
				<view class="layout-item">
					<image class="icon" :src="`${safeBaseUrl}img/card-icon.png`" />
					<view class="label">卡号</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.bankNum" 
							type="text" 
							placeholder="请输入本人银行卡号"
							@input="formatBankNo"
							maxlength="25"
						/>
					</view>
				</view>
			</view>

			<!-- 协议 -->
			<view class="agreement">
				<image 
					class="checkbox" 
					:src="isAgreed ? `${safeBaseUrl}img/login/icon-dui@2x.png` : `${safeBaseUrl}img/login/icon-kuang@2x.png`"
					@click="toggleAgreement"
				/>
				<text class="agreement-text">
					注册代表您已同意<text class="link">《优享优品平台注册协议》</text>
				</text>
			</view>

			<!-- 下一步按钮 -->
			<view class="next-step" @click="handleNext">下一步</view>
		</view>
	</view>
</template>

<script>
import { bankCardApi } from '@/api/index.js'
import {
		inject
	} from 'vue'
export default {
	data() {
		return {
			serverAddress: inject('$serverAddress', ''), // 提供默认值
			formData: {
				realname: '',
				idcardNum: '',
				bankNum: ''
			},
			isAgreed: false
		}
	},

	computed: {
		// 确保 baseUrl 有值，避免 undefined
		safeBaseUrl() {
			return this.serverAddress || ''
		}
	},
	
	onLoad(options) {
		this.nextpage = options.nextpage || ''
		this.loadIdentityInfo()
	},

	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 切换协议同意状态
		toggleAgreement() {
			this.isAgreed = !this.isAgreed
		},

		// 格式化银行卡号（每4位加空格）
		formatBankNo(e) {
			let value = e.detail.value.replace(/\s/g, '')
			let formatted = value.replace(/(\d{4})(?=\d)/g, '$1 ')
			this.formData.bankNum = formatted
		},

		// 加载身份认证信息
		async loadIdentityInfo() {
			try {
				const res = await bankCardApi.getIdentityInfo()
				if (res.r === 0) {
					this.formData.realname = res.data.realname || ''
					this.formData.idcardNum = res.data.id_number || ''
				}
			} catch (error) {
				console.error('获取身份信息失败:', error)
			}
		},

		// 处理下一步
		async handleNext() {
			// 如果不是申请云主页面，需要验证银行卡号
			if (this.nextpage !== 'apply_cloudWorker.html' && !this.formData.bankNum.trim()) {
				uni.showToast({
					title: '银行卡号不可为空!',
					icon: 'none'
				})
				return
			}

			if (!this.isAgreed) {
				uni.showToast({
					title: '请同意优享优品平台协议!',
					icon: 'none'
				})
				return
			}

			try {
				// 移除银行卡号中的空格
				const bankNumber = this.formData.bankNum.replace(/\s/g, '')
				
				const res = await bankCardApi.addBankCard({
					card_num: bankNumber,
					cardholder_name: this.formData.realname,
					id_number: this.formData.idcardNum
				})

				uni.showToast({
					title: res.msg || '操作成功',
					icon: res.r === 0 ? 'success' : 'none'
				})

				if (res.r === 0) {
					// 如果有指定的下一页，跳转到指定页面
					if (this.nextpage) {
						uni.redirectTo({
							url: `/pages/${this.nextpage.replace('.html', '')}`
						})
					} else {
						// 否则返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				}
			} catch (error) {
				console.error('添加银行卡失败:', error)
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #eeeeee;
	min-height: 100vh;
	padding-top: 40rpx;
}

.header-bag {
	position: relative;
	height: 88rpx;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #e8e8e8;
	
	.back {
		position: absolute;
		left: 30rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.header-center {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: #333;
	}
}

.wrapper {
	padding: 0 30rpx;
	
}

.info-box {
	
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
}

.layout-item {
	display: flex;
	align-items: center;
	height: 120rpx;
	padding: 0 40rpx;
	border-bottom: 1rpx solid #e8e8e8;
	
	&:last-child {
		border-bottom: none;
	}
	
	.icon {
		width: 37rpx;
		height: 37rpx;
		margin-right: 29rpx;
		flex-shrink: 0;
	}
	
	.label {
		width: 140rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.input-wrapper {
		flex: 1;
		
		input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #4b4b4b;
		}
	}
}

.agreement {
	display: flex;
	align-items: center;
	margin: 60rpx auto;
	width: 690rpx;
	
	.checkbox {
		width: 28rpx;
		height: 28rpx;
		margin-right: 18rpx;
		flex-shrink: 0;
	}
	
	.agreement-text {
		font-size: 24rpx;
		color: #666;
		line-height: 27rpx;
		
		.link {
			color: #37A962;
		}
	}
}

.next-step {
	width: 690rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: #ff2e00;
	border-radius: 10rpx;
	text-align: center;
	color: white;
	font-size: 32rpx;
	margin: 0 auto 60rpx;
}
</style>